{% extends "base.html" %}

{% block extrajs %}
{{ super() }}
{% autoescape false %}
<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
                type: 'column'
            },

            title: {
                text: '{{ title }}'
            },

            subtitle: {
                text: 'Previous {{ months }} months'
            },

            xAxis: {
                categories: {{ chart['categories']|jsonencode }}
            },

            yAxis: {
                title: {
                    text: 'Cards'
                },

                labels: {
                    formatter: function() {
                        return this.value;
                    }
                }
                {% if with_defects %}
                , stackLabels: {
                    enabled: true
                }
                {% endif %}
            },

            tooltip: {
                formatter: function() {
                    return ''+
                        this.x + ': '+ Highcharts.numberFormat(this.y, 0, ',') +' cards';
                }
            },

            plotOptions: {
                {% if with_defects %}
                column: {
                    stacking: 'normal'
                }
                {% endif %}
            },

            series: [
                {% for seri in chart['series'] %}
                {
                    name: {{ seri['name']|jsonencode }},
                    data: {{ seri['data']|jsonencode }},
                }{% if not loop.last %},{% endif %}
                {% endfor %}
            ]
        });
    });
});</script>
{% endautoescape %}
{% endblock extrajs %}

{% block content %}

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>


<div id="wip_data">
<table>
    <tr>
        <th>Month</th>
        {% if with_defects %}
            <th>Defects Done</th>
            <th>Cards Done</th>
            <th>Total</th>
        {% else %}
            <th>Cards Done</th>
        {% endif %}
    </tr>

    {% for row in month_counts %}
    <tr class="{{ loop.cycle('odd', 'even') }}">
        <td>{{ row[0] }}</td>
        {% if with_defects %}
            <td>{{ row[1]['defect'] }}</td>
            <td>{{ row[1]['card'] }}</th>
            <td>{{ row[1]['card'] + row[1]['defect'] }}</td>
        {% else %}
        	<td>{{ row[1] }}</td>
        {% endif %}
    </tr>
    {% endfor %}
</table>


{% endblock content %}
